<!-- @module call-list-person -->
<!-- @author: YunTao.Li -->
<!-- @description:  -->
<!-- @since: 2020-04-08 10:55:44 -->
<template>
  <div class="app-container">
    <!-- form begin -->
    <el-form ref="queryForm" label-width="120px" class="div-header" :model="queryForm" size="mini">
      <fieldset class="fieldset" style="margin-top:0px;">
        <legend class="legend-font" v-text="text_form" />
        <el-row :gutter="10">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="开始时间" prop="beginDate">
              <el-date-picker v-model="queryForm.beginDate" style="width:100%;" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="结束时间" prop="endDate">
              <el-date-picker v-model="queryForm.endDate" style="width:100%;" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="工作内容" prop="apiName">
              <el-input v-model="queryForm.apiName" placeholder="工作内容" />
            </el-form-item>
          </el-col>
        </el-row>
        <div style="text-align: center;padding-top: 5px;padding-bottom: 5px;">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="getList()"
          >查询</el-button>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-refresh"
            @click="resetForm('queryForm')"
          >重置</el-button>
          <el-button
            v-if="appPath==1"
            type="primary"
            size="small"
            @click="goBackWorkbench()"
          >返回</el-button>
        </div>
      </fieldset>
    </el-form>
    <!-- form end -->
    <div class="adaptiveElements OneLineQuery" >
      <!-- table begin-->
        <fieldset class="fieldset" style="margin-top:15px;">
          <!-- max-height="340"-->
          <legend class="legend-font" v-text="text_grid" />
          <el-table v-loading="listLoading" :data="callList"
                    border fit highlight-current-row style="width: 100%"
                    class="tableStyle" :height="height">
            <el-table-column type="index" align="center" width="60" label="序号" />
            <!--操作说明-->
            <el-table-column align="center" label="工作内容" >
              <template slot-scope="scope">
                <span>{{ scope.row.apiName }}</span>
              </template>
            </el-table-column>
            <!--操作员-->
            <el-table-column align="center" label="员工姓名" width="150px">
              <template slot-scope="scope">
                <span>{{ scope.row.empName }}</span>
              </template>
            </el-table-column>
            <!--操作时间-->
            <el-table-column align="center" label="操作时间" width="350px">
              <template slot-scope="scope">
                <span>{{ scope.row.dateTime }}</span>
              </template>
            </el-table-column>
            <!--系统编码-->
            <!-- <el-table-column align="center" label="系统编码" width="150px">
              <template slot-scope="scope">
                <span>{{ scope.row.systemCode }}</span>
              </template>
            </el-table-column> -->
            <!--应用名称-->
            <el-table-column align="center" label="应用名称" width="200px">
              <template slot-scope="scope">
                <span>{{ scope.row.appName }}</span>
              </template>
            </el-table-column>
            <!--请求URL-->
            <!-- <el-table-column label="请求URL">
              <template slot-scope="scope">
                <span>{{ scope.row.url }}</span>
              </template>
            </el-table-column> -->
          </el-table>
        </fieldset>
      </div>
      <!-- table end -->
      <pagination v-show="total>0" :total="total" :page.sync="queryForm.page"
                  class="adaptivePaging" :limit.sync="queryForm.limit" @pagination="getList" />
    </div>
</template>

<script>
import { callRecordList } from '@/api/report/report-service'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import Vue from 'vue'

export default {
  components: { Pagination },
  data() {
    return {
      height: 'calc(100% - 16px)',
      msg: '-',
      text_form: '查询信息',
      text_grid: '调用记录',
      callList: [],
      listLoading: true,
      total: 0,
      appPath: '',
      queryForm: {
        page: 1,
        limit: 10,
        empCode: '',
        appCode: '',
        sysCode: '',
        deptCode: '',
        apiName: '',
        beginDate:null,
        endDate: null
      }
    }
  },
  created() {
    // 初始化查询展示
    this.getList()
    this.appPath = this.$route.params.appPath
    this.queryForm.beginDate = this.$route.params.FirstDay
    console.info('this.queryForm.beginDate='+ this.queryForm.beginDate);
  },
  watch:{


  },
  mounted() {
    const queryRange = localStorage.getItem('queryRange')
    this.queryForm.queryRange = queryRange

    if (queryRange === 'all') {
      // donothing
    } else if (queryRange === 'dept') {
      try {
        this.queryForm.deptCode = localStorage.getItem('deptCode')
      } catch (e) {
        console.log(e)
      }
    } else if (queryRange === 'person') {
      const empcode = localStorage.getItem('empCode')
      if (!empcode || empcode === '') {
        Vue.prototype.loginUser()
      }

      if (empcode) {
        this.queryForm.empCode = empcode
      }
    }
  },
  methods: {
    // 返回按钮
    goBackWorkbench() {
      window.history.go(-1)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getList() {
      this.listLoading = true
      callRecordList(this.queryForm).then(response => {
        this.callList = response.data.records
        this.total = response.data.total

        // 假loading 1秒后消失
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      })
    }
  }
}
</script>

<style>
.el-table .message-unread {
  font-weight: bolder;
  }
</style>
<style scoped lang="scss">

@import "./index.scss";

.el-table__header{
    font-size: 10px
}
.el-table{
    font-size: 12px
}
.div-body{
  margin-top: 5px;
}
.div-header{
  font-size: 12px
}
.el-form-item__label{
  font-size: 12px
}
element.style{
  padding-top: 0px;
}
fieldset {
    display: block;
    margin-inline-start: 1px;
    margin-inline-end: 1px;
    padding-block-start: 0.35em;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    min-inline-size: min-content;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(200, 202, 204);
    border-image: initial;
}
div.popContainer{
    position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .5);
        color: white;
}
</style>
